<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <style>
        .s-img {
            width: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            var div1 = document.getElementById("div1");
            console.log(div1)
        };

    </script>
</head>
<body id="body" style="color: #0dcaf0;background-color: orange">
<div>
    <h3>登录界面</h3>
    <form onsubmit="return test()">
        <div>
            用户名：<input type="text" id="username">
        </div>
        <div>
            密码：<input type="text" id="password">
        </div>
        <div>
            <input type="submit" id="submit">
            <input type="reset" id="reset">
        </div>
    </form>
</div>

<div id="div1">hello
    <h3>静夜思</h3>
    <p>床前明月光，</p>
    <p>疑是地上霜；</p>
    <p>举头望明月，</p>
    <p>低头思故乡。</p>
</div>
<img id="image" name="img1" src="../static/img.png" alt="">
<div id="div">
    <!--    <div id="div1">1</div>-->
    <!--    <div id="div2">2</div>-->
</div>
<button onclick="fn()">按钮</button>
<button id="btn">测试按钮</button>
<script>
    function test() {
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        console.log(username.value)
        console.log(password.value)
        if (username.value == "") {
            alert("用户名不能为空")
            username.focus()
            return false;
            // 用户名只能是数字，3-5位 正则
        } else if (!new RegExp("^[0-9]{3,5}$").test(username.value)) {
            alert("用户名格式不准确")
            username.focus()
            return false;
        }
        if (password.value == "") {
            alert("密码不能为空");
            username.focus()
            return false;
        }

    }

    // 事件外联写法
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("123")
    };

    function f1() {

    }

    function fn() {
//1.创建标签节点
        var imgTag = document.createElement("img"); //<img>
//2.创建属性节点
        var srcAttr = document.createAttribute("src"); // src=""
        srcAttr.nodeValue = "../static/img_1.png"; //src="static/img/xju.jpg"
//3.将属性节点添加到标签节点中
        imgTag.setAttributeNode(srcAttr); // <imgsrc="static/img/xju.jpg">

        imgTag.setAttribute("src", "../static/img.png")
        var body = document.body;
        var div = document.getElementById("div1");

        // 添加到最后
        // body.appendChild(imgTag)

        // body.insertBefore(imgTag,div)
        // 替换节点
        // body.replaceChild(imgTag,div)

        var image = document.getElementById("image");
        // body.replaceChild(div,image)

        // 删除节点
        // image.remove()
        body.removeChild(image)


        console.log(body)
        var attributes = body.attributes;
        // console.log(attributes)
        // console.log(attributes[1].nodeName)
        // console.log(attributes[1].nodeType)
        // console.log(attributes[1].nodeValue)

        //childNodes所有的标签对象都可以通过childNodes属性获取当前标签的子节点(包括标签节点、文本节点)
        var nodesArr = div.childNodes;
        // console.log(nodesArr)
        // console.log(nodesArr[1].nodeName)
        // console.log(nodesArr[1].nodeType)
        // console.log(nodesArr[1].nodeValue)


        // var elementById = document.getElementById("div");
        // var children = elementById.children;
        // console.log(children)
        // var firstElementChild = elementById.firstElementChild;
        // console.log(firstElementChild)
        // var lastElementChild = elementById.lastElementChild;
        // console.log(lastElementChild)
        //
        // console.log(elementById.parentElement)

        // var elementById = document.getElementById("image");
        // console.log(elementById);
        // var src = elementById.src;
        // elementById.src = "../static/img_1.png"
        //
        // // elementById.style.width = "100px"
        //
        // elementById.className = "s-img"
        //
        // var innerText = document.getElementById("div").innerText;
        // console.log(innerText)


        /*var elementsByName = document.getElementsByName("img1");
        console.log(elementsByName)

        var elementsByClassName = document.getElementsByClassName("s-img");
        console.log(elementsByClassName)

        var elementsByTagName = document.getElementsByTagName("img");
        console.log(elementsByTagName)*/


        // document.write("hello")
        // // document.close()
        // document.open()
        // document.write("hi")

    }

    // console.log(document.body)
    // console.log(document.title)
    // console.log(document.URL)
    // document.title = "hi"

    // all : 获取当前网页文档中的所有元素
    var arr1 = document.all;
    // imgs : 获取当前网页文档中所有图片
    var arr2 = document.images;
    // links: 获取当前网页文档中所有的链接(a,area)
    var arr3 = document.links;
    // forms：获取当前网页文档中的form元素
    var arr4 = document.forms;
    // console.log(arr1)
    // console.log(arr2)
    // console.log(arr3)
    // console.log(arr4)

</script>
</body>
</html>